<template>
    <div class="cooperative-enterprise-age">
        <echarts :data="optionData" height="300px"></echarts>
    </div>
</template>

<script>
import Echarts from "@components/my-components/echarts.vue";

export default {
    mixins: [],
    components: {
        Echarts,
    },
    props: {
        type:{
            type:String,
            default:'',
        },
        options: {
            type: Array,
            default: () => [],
        },
        ytitleLeft:{
            type:String,
            default:'企业数量', 
        },
        ytitleRight:{
            type:String,
            default:'项目金额', 
        }
    },
    data () {
        return {

        };
    },
    computed: {
        xdata:function(){
            return this.options.map((item,index,arr)=>{
                return item.range
            })
        },
        yDataLeft:function(){
            return this.options.map((item,index,arr)=>{
      
                    return item.counts
                
            })
        },
        yDataRight:function(){
            return this.options.map((item,index,arr)=>{

                    return item.price
                
            })
        },
        yDataLeftMax:function(){
            let countMax = Math.max(...this.yDataLeft);
            return Math.ceil(countMax / 10) * 10
        },
        yDataRightMax:function(){
            let priceMax = Math.max(...this.yDataRight);
            return Math.ceil(priceMax / 10) * 10
        },


        optionData () {
            const colors = ["#3b68ff", "#2ec75a", "#ff8f00", "#ff5454"];
            return {
                title:{
                    show:true,
                    text:'注：项目金额指所有项目的中标金额之和，少数缺失的中标金额，用项目预算补充。',
                    left: '9%',
                    top: '88%',
                    textStyle: {
                        color: "#909399",
                        fontSize: 13,
                    },
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        crossStyle: {
                            // color: "#999",
                        },
                    },
                },
                toolbox: {

                },
                legend: {
                    data: [this.ytitleLeft, this.ytitleRight],
                },
                grid: {
                    left: '12%',
                    // right: '4%',
                    bottom: '20%',
                    // containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        name: '注册资本',
                        nameLocation: "start",
                        nameTextStyle: { // x轴name的样式调整
                            color: colors[0],
                            padding:[0,4,0,0]  // 加上padding可以调整其位置
                        },
                        data: this.xdata,
                        // data: [1,2,3,4],
                        axisPointer: {
                            type: "shadow",
                        },
                        axisLabel: {
                            interval:0
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: this.ytitleLeft + '(个)',
                        min: 0,
                        max: this.yDataLeftMax,
                        interval: this.yDataLeftMax /5,
                        axisLabel: {
                            formatter: "{value}",
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: colors[0],
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dotted',
                            }
                        },
                        axisTick:{
                            show:false // 不显示坐标轴刻度线
                        },
                    },
                    {
                        type: "value",
                        name: this.ytitleRight + '(万元)',
                        min: 0,
                        max: this.yDataRightMax,
                        interval: this.yDataRightMax / 5,
                        axisLabel: {
                            formatter: "{value}",
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: colors[2],
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dotted',
                            }
                        },
                        axisTick:{
                            show:false // 不显示坐标轴刻度线
                        },
                    },
                ],
                series: [
                    {
                        name: this.ytitleLeft,
                        type: "bar",
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + " 个";
                            },
                        },
                        barWidth : 30, 
                        barMinHeight:4,
                        data:this.yDataLeft,
                        color:colors[0]  
                    },
                    {
                        name: this.ytitleRight,
                        type: "line",
                        tooltip: {
                            valueFormatter: (value) => value + ' 万元'
                        },
                        yAxisIndex: 1,
                        data: this.yDataRight,
                        color:colors[2]  
                    },
                ],
            };
        },

    },
    watch: {},
    methods: {
        int () { },
    },
    mounted () {
        this.int();
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
</style>
